<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item :label="$t('时间')">
              <a-date-picker
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请选择开始时间')"
                class="query-group-cust"
                v-model="queryParam.createTime_begin"
                style="min-width: calc(50% - 10px)"
              ></a-date-picker>
              <span class="query-group-split-cust"></span>
              <a-date-picker
                :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请选择结束时间')"
                class="query-group-cust"
                v-model="queryParam.createTime_end"
                style="min-width: calc(50% - 10px)"
              ></a-date-picker>
            </a-form-item> </a-col
          ><a-col :xl="8" :lg="9" :md="10" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('查询') }}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('重置') }}</a-button>
            </span>
          </a-col></a-row
        >
      </a-form>
    </div>
    <div>
      <div style="width: 1000px; height: 450px" id="myChart1"></div>
    </div>
  </a-card>
</template>

<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
let myChart1
export default {
  name: 'MachineBackingAnalysis',
  data() {
    return {
      moment,
      description: '机台投退分析',
      dataSource: [],
      queryParam: {
        createTime_begin: moment().format('YYYY-MM-DD 00:00:00'),
        createTime_end: moment().format('YYYY-MM-DD 23:59:59'),
        groupBy: 'game_type_id,game_id,output_type',
        column: 'createTime',
        order: 'desc',
      },
      url: {
        list: '/game/bisGameCoinRecord/getReport',
      },
    }
  },
  mounted() {
    let that = this
    that.searchQuery()
    setTimeout(function () {
      that.getData()
    }, 1)
  },
  watch: {
    dataSource(nList) {
      if (nList.length > 0) {
        this.test1(nList)
      } else {
        myChart1.hideLoading()
        myChart1.clear()
      }
    },
  },
  methods: {
    getData() {
      let that = this
      myChart1 = that.$echarts.init(document.getElementById('myChart1'))
      myChart1.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
    },
    test1(list) {
      let that = this
      myChart1 = that.$echarts.init(document.getElementById('myChart1'))
      myChart1.hideLoading()
      myChart1.clear()
      let seriesDate = [],
        xAxisData = [],
        data = [that.$t('投币'), that.$t('退票')],
        list1 = [],
        list2 = []
      list.forEach((col) => {
        xAxisData.push(col.gameId_dictText)
        list1.push(col.inputPrice)
        list2.push(col.outputPrice)
      })
      data.forEach((d, i) => {
        let dtl = {
          name: d,
          type: 'bar',
          data: i == 0 ? list1 : list2,
          barWidth: list.length <= 7 ? '40' : '20%',
        }
        seriesDate.push(dtl)
      })
      myChart1.setOption(
        {
          title: {
            text: that.$t('机台投退分析'),
            left: 'center',
            show: true,
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              align: 'left',
            },
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          grid: {
            show: false,
            top: '60',
            bottom: '50',
            right: '40',
            left: '60',
          },
          legend: {
            show: true,
            data: data,
            bottom: 0,
            itemHeight: 9,
            itemWidth: 8,
            icon: 'roundRect',
            textStyle: {
              fontSize: 11,
            },
          },
          color: ['#4F81BD', '#C0504D'],
          xAxis: {
            splitLine: { show: false },
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow',
            },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                //color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              },
            },
            axisTick: {
              show: true,
              interval: 0,
            },
            axisLabel: {
              //  X 坐标轴标签相关设置
              interval: 0,
              rotate: '45',
            },
          },
          // 设置两个y轴，左边显示数量，右边显示概率
          yAxis: [
            {
              splitLine: { show: false },
              type: 'value',
              name: '',
              min: 0,
              minInterval: 1,
              show: true,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  //color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                },
              },
            },
          ],
          // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
          series: seriesDate,
        },
        true
      )
    },
    searchQuery() {
      let that = this
      getAction(that.url.list, that.queryParam).then((res) => {
        if (res.success) {
          if (res.result.records.length > 1) {
            let records = res.result.records
            records.pop()
            that.dataSource = records
          } else {
            that.dataSource = []
          }
        } else {
          that.dataSource = []
          that.$message.error(res.message)
        }
      })
    },
    searchReset() {
      let that = this
      that.queryParam = {
        createTime_begin: moment().format('YYYY-MM-DD 00:00:00'),
        createTime_end: moment().format('YYYY-MM-DD 23:59:59'),
        groupBy: 'game_type_id,game_id,output_type',
        column: 'createTime',
        order: 'desc',
      }
      that.searchQuery()
    },
  },
}
</script>